<template>
  <div>
    <!-- 导航栏 -->
    <mt-header fixed title="宠物保险" style="background: #f49b00">
      <router-link to="" slot="left">
        <mt-button icon="back" @click="$router.go(-1)"></mt-button>
      </router-link>
    </mt-header>
    <div style="height: 40px"></div>

    <div id="DiCengYanSe">
      <img src="../assets/3.jpg" alt="">
      <!-- 宠物医疗险 -->
      <div id="YiLiaoXian">

        <div>
          <h2 style="margin:0;padding:0;">宠物医疗险</h2>
          <span style="font-size: 12px;color: #949494;">报销犬猫看病的高昂费用，用额外赠送超值贴心服务。根据不同险种的保障范围，为自家毛孩子挑选合适的保险喔~</span>
        </div>

        <div id="tuyou" >
          <img id="tupian" src="../assets/2.png" alt="">
          <div id="you">
            <div>
                平安 . 爱宠安心保
                <van-button id="AnNiu" type="primary" size="mini" color="#5175E9">性价比之选</van-button>
            </div>
            <div style="font-size:14px;margin-top:5px;color: #949494;">保费低 . 保额高</div>
            <div style="font-size:12px;margin-top:5px; margin-bottom: 6px; color: #5163D9;">高发性传染病全覆盖|免芯片和证明</div>
            <div style="color:#F25629;">55元/90天</div>
          </div>
        </div>

        <div id="tuyou">
          <img id="tupian" src="../assets/4.jpg" alt="">
          <div id="you">
            <div>
              平安 . 爱宠医保
              <van-button id="AnNiu" type="primary" size="mini" color="#5175E9">3天极速理赔</van-button>
            </div>
            <div style="font-size:14px;margin-top:5px;color: #949494;">“免费赠送”体检和疫苗</div>
            <div style="font-size:12px;margin-top:5px; margin-bottom: 6px; color: #5163D9;">高发疾病报销|诊疗费用赔付高达60%</div>
            <div style="color:#F25629;">957元/年起</div>
          </div>
        </div>

        <div id="tuyou">
          <img id="tupian" src="../assets/5.jpg" alt="">
          <div id="you">
            <div>
              平安 . 医保Plus
              <van-button id="AnNiu" type="primary" size="mini" color="#5175E9">医院窗口直赔</van-button>
            </div>
            <div style="font-size:14px;margin-top:5px;color: #949494;">送每年一次的体验和犬猫疫苗</div>
            <div style="font-size:12px;margin-top:5px; margin-bottom: 6px; color: #5163D9;">覆盖日常疾病/意外及全病种保障100%理赔</div>
            <div style="color:#F25629;">1431元/年起</div>
          </div>
        </div>

      </div>
      <!-- 宠物责任险 -->
      <div id="ZeRenXian">
         <div>
          <h2 style="margin:0;padding:0;">宠物责任险</h2>
          <span style="font-size: 12px;color: #949494;">淘气的毛孩子们必备！毛孩子闯祸后，保险公司对第三方者的医疗费、财产损失进行赔付。</span>
         </div>

         <div id="tuyou">
          <img id="tupian" src="../assets/6.jpg" alt="">
          <div id="you">
            <div>
              人保 . 宠物责任险
              <van-button id="AnNiu2" type="primary" size="mini" color="#FD2A27">全年最高30万元</van-button>
            </div>
            <div style="font-size:14px;margin-top:5px;color: #949494;">淘气有保障，给您全方位爱与自由</div>
            <div style="font-size:12px;margin-top:5px; margin-bottom: 6px; color: #5163D9;">0.13元每天起</div>
            <div style="color:#F25629;">50元/年</div>
          </div>
        </div>

        <div id="tuyou">
          <img id="tupian" src="../assets/7.jpg" alt="">
          <div id="you">
            <div>
              平安 . 宠物责任险
              <van-button id="AnNiu2" type="primary" size="mini" color="#4F75EC">全年最高10万元</van-button>
            </div>
            <div style="font-size:14px;margin-top:5px;color: #949494;">宠物主及第三者伤害均可保</div>
            <div style="font-size:12px;margin-top:5px; margin-bottom: 6px; color: #5163D9;">0.13元每天起</div>
            <div style="color:#F25629;">109元/年</div>
          </div>
        </div>

        <div id="tuyou">
          <img id="tupian" src="../assets/8.jpg" alt="">
          <div id="you">
            <div>
              国泰 . 宠物责任险
              <van-button id="AnNiu2" type="primary" size="mini" color="#4F75EC">最高20万报销额</van-button>
            </div>
            <div style="font-size:14px;margin-top:5px;color: #949494;">宠物咬伤第三者人身或直接财务损失</div>
            <div style="font-size:12px;margin-top:5px; margin-bottom: 6px; color: #5163D9;">宠物无年龄限制、无等待期</div>
            <div style="color:#F25629;">1.58元起/月（支持月缴）</div>
          </div>
        </div>


      </div>
      <!-- 合作保险公司 -->
      <div id="HeZuoBaoXianGongSi">
        <h4 style="margin:0; margin-bottom: 8px;">合作保险公司</h4>
        <div>
          <img src="../assets/9.jpg" alt="">
          <img src="../assets/99.jpg" alt="">
          <img src="../assets/999.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
#AnNiu2{
  bottom: 3px;
  margin-left: 2px;
}
#AnNiu{
  bottom: 3px;
  margin-left: 5px;
}
// 底层颜色
#DiCengYanSe {
  background-color: #89C1FC;
  padding-bottom: 9px;
}
// 最上面的图片
img {
  width: 100%;
  border-radius: 3px;
}
// 头像右侧整体的左外边距
#tuyou #you {
  margin-left: 10px;
}
// 头像的宽高
#tupian {
  width: 100px;
  height: 100px;
}
// 下整体样式
#tuyou {
  display: flex;
  padding-top: 10px;
  border-radius: 3px;
}
// 最外层样式
#YiLiaoXian {
  background-color: white;
  margin: 10px 10px;
  padding: 8px 9px;
  border-radius: 3px;
}
#ZeRenXian{
  background-color: white;
  margin: 10px 10px;
  padding: 8px 9px;
  border-radius: 3px;
}
// 合作保险公司
#HeZuoBaoXianGongSi{
  background-color: white;
  margin: 10px 10px;
  padding: 8px 9px;
  border-radius: 3px;
}

#HeZuoBaoXianGongSi > div > img{
  width: 100px;
  height: 35px;
  margin-right: 10px;
}
</style>